<template>
    <!-- 在线留言  tab页 -->
    <div class="maxBoxs">
        <div class="center-box">
            <el-container>
                <el-aside width="200px">
                    <el-menu class="el-menu-demo" mode="horizontal" router background-color="#0049ac" text-color="#fff"
                        active-text-color="#fff">
                        <el-menu-item index="/online-message">
                            <template #title>
                                <i class="el-icon-s-comment"></i><span style="width:200px">在线留言 <i
                                        class="el-icon-d-arrow-right"></i></span>
                            </template>
                        </el-menu-item>
                    </el-menu>
                </el-aside>

                <el-container>
                    <el-header>
                        <div class="title">
                            <div class="left-title"><span>在线留言</span></div>
                            <!-- <div class="right-location">您所在的位置: <span>网站首页 > 在线留言</span></div> -->
                            <div class="right-location"><span>您所在的位置:</span> &nbsp;
                                <!-- 面包屑 -->
                                <el-breadcrumb separator-class="el-icon-arrow-right">
                                    <el-breadcrumb-item :to="{ path: '/' }">网站首页</el-breadcrumb-item>
                                    <el-breadcrumb-item>在线留言</el-breadcrumb-item>
                                </el-breadcrumb>
                            </div>
                        </div>
                    </el-header>

                    <el-main>
                        <!-- 内容盒子 -->
                        <div class="main-content">
                            <!-- 内容标题 -->
                            <div class="title-contentBox">
                                <p class="titles">填写你的建议或意见</p>
                                <p class="divider">
                                    <el-divider><span>●</span></el-divider>
                                </p>
                                <p class="description">请放心填写，我们将严格保证您的隐私安全，感谢您的宝贵建议或意见。</p>
                            </div>

                            <!-- 内容form表单盒子 -->
                            <div style="width:60%;margin:auto">
                                <el-form inline>
                                    <el-form-item label="姓名：">
                                        <el-input placeholder="姓名" v-model="messageInfo.userName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="电话：">
                                        <el-input v-model="messageInfo.phone"></el-input>
                                    </el-form-item>
                                    <el-form-item label="邮箱：">
                                        <el-input v-model="messageInfo.eMail"></el-input>
                                    </el-form-item>
                                </el-form>
                                <el-form>
                                    <el-form-item label="意见和建议：">
                                        <el-input type="textarea" placeholder="请输入内容" v-model="messageInfo.options">
                                        </el-input>
                                    </el-form-item>
                                </el-form>
                            </div>

                            <!-- 按钮组 -->
                            <div class="btn-group">
                                <el-button type="info" @click="resetMessage">重置信息</el-button>
                                <el-button type="primary" @click="submitInfo">提交留言</el-button>
                                <span class="tips">感谢您的留言，您建议或意见是我们前进的动力！</span>
                            </div>

                        </div>
                    </el-main>
                </el-container>

            </el-container>
        </div>

        <!-- 底部 -->
        <common-button />
    </div>
</template>

<script>
import CommonButton from '@/components/CommonButton/CommonButton.vue'
export default {
    data() {
        return {
            messageInfo: {
                userName: '',
                phone: '',
                eMail: '',
                options: '',
            }
        }
    },
    methods: {
        resetMessage() {
            // alert('重置信息')
            this.messageInfo = {}
        },
        submitInfo() {
            console.log(this.messageInfo);
        }
    },
    components: {
        CommonButton
    }
}
</script>

<style lang="less" scoped>
.maxBoxs {
    width: 100%;
    height: 90.4vh; //vh显示背景 %不会显示
    background: url(@/assets/school2x.png) no-repeat;
    background-size: 100% auto;
}

.center-box {
    z-index: 99;
    position: absolute;
    left: 0;
    right: 0;
    top: 1.9rem;
    bottom: 0;
    margin: auto;
    width: 73%;
    height: 36rem;
    background: #fff;
    padding: 1.8rem;
    overflow: hidden;
}

.el-container {
    height: 36rem;
}

.el-menu.el-menu--horizontal {
    border-bottom: none;
}

/deep/.el-aside {
    background-color: #e8f4ff;
    color: #333;
    text-align: center;
    min-height: 31rem;
}

.el-menu--horizontal>.el-menu-item {
    width: 100%;
}

// 头部
.el-header {
    text-align: center;
    line-height: 60px;
    background: #fff;

    // 顶部盒子
    .title {
        display: flex;
        justify-content: space-between;

        .left-title {
            font-weight: bold;
            font-size: 1.5rem;
            color: red;
        }

        // 面包屑位置
        .right-location {
            color: #b3b3b3;
            font-size: 0.8rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

.el-icon-s-comment {
    color: #fff;
}

.el-icon-d-arrow-right {
    color: #fff;
    padding-left: 2.9rem;
}


// 内容盒子
.el-main {
    padding: 0;
    background: #fff;
}

// 主体内容
.main-content {
    width: 96%;
    height: 54.9vh;
    margin-left: 1.312rem;
    border: 1px solid #e7e7e7;
}

.el-divider--horizontal {
    margin: 9px 0;
}

// 在线留言内容标题盒子
.title-contentBox {
    width: 100%;
    height: 7.25rem;
    text-align: center;

    .titles {
        margin: 1.0625rem 0;
        font-size: 1.55rem;
        font-weight: bold;
        color: #0049ac;
    }

    .divider {
        width: 22%;
        margin: auto;
        margin-bottom: 1.25rem;
    }

    .el-divider__text {
        padding: 0 2px;
        color: #999999;
    }

    .description {
        font-size: 0.8125rem;
        color: #999999;
    }
}

.btn-group {
    margin-left: 20%;
    position: relative;
}

.tips {
    margin-left: 15px;
    color: #f82c28;
    font-size: 0.75rem;
    font-weight: bold;
    position: absolute;
    bottom: 0;
}

.el-button--primary {
    background: #0049ac;
    border: #0049ac;
}

.el-button--primary:hover {
    background: #6b97d6;
    border: #6b97d6;
}
</style>